<template>
  <el-dialog
    :visible.sync="visible"
    title="检查周期"
    append-to-body
    width="600px"
    @close="handleClose"
  >
    <el-radio-group v-model="cycleType">
      <div>
        <el-radio :label="1">
          <span>每天持续检查(默认)</span>
        </el-radio>
      </div>
      <div>
        <el-radio :label="2">
          <span>每周，</span>

          <el-checkbox-group v-model="cycleParams_2" class="week-block">
            <el-checkbox label="周一">
              周一
            </el-checkbox>
            <el-checkbox label="周二">
              周二
            </el-checkbox>
            <el-checkbox label="周三">
              周三
            </el-checkbox>
            <el-checkbox label="周四">
              周四
            </el-checkbox>
            <el-checkbox label="周五">
              周五
            </el-checkbox>
            <el-checkbox label="周六">
              周六
            </el-checkbox>
            <el-checkbox label="周日">
              周日
            </el-checkbox>
          </el-checkbox-group>
        </el-radio>
      </div>
      <div>
        <el-radio :label="3">
          <span>每月，第</span>
          <el-input v-model="cycleParams_3" type="number" size="mini" :max="31" :min="0" placeholder="请输入1-31" />
          <span>天</span>
        </el-radio>
      </div>
      <div>
        <el-radio :label="4">
          <span>每季，第</span>
          <el-input v-model="cycleParams_4" size="mini" type="number" :max="90" :min="0" placeholder="请输入1-90" />
          <span>天</span>
        </el-radio>
      </div>
      <div>
        <el-radio :label="5">
          <span>每年，第</span>
          <el-input v-model="cycleParams_5" size="mini" type="number" :max="365" :min="0" placeholder="请输入1-365" />
          <span>天</span>
        </el-radio>
      </div>
    </el-radio-group>

    <div slot="footer" class="footer">
      <el-button size="mini" @click="handleClose">
        取消
      </el-button>
      <el-button size="mini" type="primary" @click="handleOk">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CycleTemplateInput',
  props: {
  },
  data() {
    return {
      visible: false,
      cycleType: null,
      cycleParams_2: [],
      cycleParams_3: null,
      cycleParams_4: null,
      cycleParams_5: null
    }
  },

  methods: {
    open(data) {
      this.$data.visible = true
      this.setInitData(data)

      return new Promise((resolve, reject) => {
        this.monitor = { resolve, reject }
      })
    },
    setInitData(data) {
      if (!data) {
        return
      }
      this.$data.cycleType = data.cycleType
      if (data.cycleType === 2) {
        this.$data.cycleParams_2 = data.cycleParams.split(',')
      } else if (data.cycleType > 2) {
        this.$data['cycleParams_' + data.cycleType] = data.cycleParams
      }
    },
    formatSubmitData() {
      const { cycleType } = this.$data
      let cycleParams = this.$data['cycleParams_' + cycleType]
      if (cycleType === 2) {
        cycleParams = cycleParams.join(',')
      }
      return { cycleType, cycleParams }
    },
    handleChange(index) {
      this.$data.selectIndex = index
    },
    handleClose() {
      this.$emit('close')
      this.$data.visible = false
    },
    checkFormData(data) {
      if (!data.cycleType) {
        this.$message.warning('请选择检查周期')
        return false
      }

      if (data.cycleType === 2 && !data.cycleParams) {
        this.$message.warning('请勾选周期参数')
        return false
      }
      if (data.cycleType === 3) {
        if (!data.cycleParams || data.cycleParams > 31) {
          this.$message.warning('请输入合法月度天数')
          return false
        }
      }
      if (data.cycleType === 4) {
        if (!data.cycleParams || data.cycleParams > 90) {
          this.$message.warning('请输入合法季度天数')
          return false
        }
      }
      if (data.cycleType === 5) {
        if (!data.cycleParams || data.cycleParams > 365) {
          this.$message.warning('请输入合法年度天数')
          return false
        }
      }
      return true
    },
    handleOk() {
      const submitData = this.formatSubmitData()
      if (!this.checkFormData(submitData)) {
        return
      }
      this.$data.visible = false

      this.monitor.resolve(submitData)
    }

  }
}
</script>

<style lang="scss" scoped>
  .el-radio-group>div{
    padding: 10px 0;
  }
  .el-input {
    width: 160px;
    margin: 0 10px;
  }
  .week-block {
    display: inline-block;

    .el-checkbox {
      margin-right: 20px;
    }
  }
  .el-input-number__decrease, .el-input-number__increase {
    display: none;
  }
</style>
